<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>微众智慧社区</title>
  <link rel="icon" type="image/png" href="assets/i/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  <link rel="stylesheet" type="text/css" href="assets/css/amazeui.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/app.css">
  <link rel="stylesheet" type="text/css" href="assets/css/common.css">
  <style type="text/css">
    body{background-color: #F7F7F7;}
  </style>
</head>
<body>
  <div class="actionbar">
    <a href="javascript:history.back();"><div class="sub-left btn-back"></div></a>
    <div class="sub-center title">编辑话题</div>
    <div class="sub-right"></div>
  </div>
<div id="content" style="background:#f3f3f3;"><form id="form1" enctype="multipart/form-data" method="post" action="/uploadImg">
	<div style="width:100%;height:44px;"></div>
  <div id="postBar" style="width:100%;overflow-y:auto;font-size:1rem;">
    <div>
      <textarea id="newMain" style="width:90%;height:100px;line-height:150%;margin:10px 5% 5px;border:none;font-size:1.4rem;box-sizing:border-box;padding:10px;background:#fff;"></textarea>
    </div>
    <div><input id="title" style="width:90%;height:30px;line-height:30px;margin:5px 5% 5px;border:none;font-size:1.4rem;box-sizing:border-box;padding:0 10px;background:#fff;" type="text" /></div>
    <div id="pics"></div>
    <div style="width:auto;height:40px;float:right;margin:0 5%;border-top:1px solid #ccc;">
      <input id="file1" type="file" accept="image/*;" class="input" style="display:none;" onchange="preImg(this.id);">
      <div id="btnGetPic" onclick="getPhoto(0)"></div>
    </div>
    <div style="width:100%;height:1px;clear:both;"></div>
    <div  class="btn" onclick="postNews()">确认提交</div>
    <div id="waiting">正在提交，请稍等...</div>
  </div></form>
</div>
<style type="text/css">
#btnGetPhoto,#btnGetPic{width:90px;height:40px;float:right;background:url(assets/i/postPhoto.jpg) no-repeat center center;margin-right:10px;background-size:50% 100%;}
#btnGetPic{margin-right:0;margin-left:10px; background-image:url(assets/i/postPic.jpg);}
#pics{width:90%;height:auto;margin:10px 5%;position:relative;}
#pics div{height:120px;position:absolute;background:url(assets/i/delete.png) no-repeat center center;}
#pics div.uploading{background:url(assets/i/loading.png) no-repeat center center;}
#pics div.uploaded{background:url(assets/i/ok.png) no-repeat center center;}
#pics img{float:left;margin:5px 10px 0 0;}
#postBar .btn{width:80%;height:40px;background:#B1D51B;line-height:40px;font-size:1.4rem;text-align:center;color:#fff;-webkit-border-radius:20px;margin:10px 10%;overflow:hidden;}
#postBar .btn:active{background:#ccc;}
#waiting{width:100%;height:20px;margin:10px 0 20px;line-height:20px;font-size:1rem;text-align:center;display:none;color:#B1D51B}
</style>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
	$(window).resize(function(e) {
      $("#postBar").height($(window).height()-44);
  });
	$("#postBar").height($(window).height()-44);
});
function getPhoto(type) {
	$("#file1").click();
}

function preImg(sourceId) {
    if (typeof FileReader === 'undefined') {
        alert('Your browser does not support FileReader...');
        return;
    }
    var reader = new FileReader();

    reader.onload = function(e) {
        $("#pics").html("<img src='"+this.result+"' style='max-width:300px;max-height:100px' />");
    }
    reader.readAsDataURL(document.getElementById(sourceId).files[0]);
}

// 上传文件到服务器
function uploadFile() {
  var xhr = new XMLHttpRequest();
  var fd = new FormData();
    	  //关联表单数据,可以是自定义参数
  fd.append("content", document.getElementById('newMain').value);
  fd.append("uploadImg", document.getElementById('file1').files[0]);
  fd.append("title", document.getElementById('title').value);

  /* event listners */
  xhr.upload.addEventListener("progress", uploadProgress, false);
  xhr.addEventListener("load", uploadComplete, false);
  xhr.addEventListener("error", uploadFailed, false);
  xhr.addEventListener("abort", uploadCanceled, false);
  /* Be sure to change the url below to the url of your upload server side script */
  xhr.open("POST", "/uploadImg");
  console.dir(fd);
  xhr.send(fd);
}

function uploadFailed(evt) {
  $("#newMain").removeAttr("readonly");
  $("#waiting").css("display","none");
  alert("提交失败");
}

function uploadCanceled(evt) {
  $("#newMain").removeAttr("readonly");
  $("#waiting").css("display","none");
}
function uploadProgress(evt) {}
function uploadComplete(evt) {
  alert("提交成功！");
  window.location.href="/tab_find.html";
}

function postNews(){
	if($("#waiting").css("display")=="none"){
			$("#newMain").attr("readonly","true");
			$("#waiting").css("display","block");
			uploadFile();
	}
}
</script>
</body>
</html>
